<template>
    <div class="page-container">
        <!-- 缩放容器：承载所有内容，基于原9600*2240分辨率 -->
        <div class="scale-container">
            <!-- 顶部标题 -->
            <div class="headTitle">{{ headTitle }}</div>
            <div class="headButton" @click="backHome"></div>
            <!-- 左边内容 -->
            <div class="left">
                <div class="box">
                    <div class="headbox">
                        <div class="headImg"></div>
                        <div class="title">中汽研汽车检验中心(昆明)有限公司</div>
                    </div>
                    <div class="contentbox">
                        <div class="content">
                            <img class="img1" src="/imgs/kunming/主图.jpeg" />
                            <p class="contentTitle">
                                中汽研汽车检验中心（昆明）有限公司（简称“昆明检验中心”）成立于2017年7月，是由中国汽车技术研究中心有限公司控股，与云南省贵金属新材料控股集团股份有限公司和云南云内动力集团有限公司三方共同出资组建的合资公司，是国内首个“国家高原机动车质量检验检测中心”。
                            </p>
                            <p class="contentTitle">
                                昆明检验中心已建设整车排放及耐久试验室、发动机试验室、商用车试验室，预计总投资约15亿元，采用一次规划、分期建设模式，目前总投资约5.2亿元。
                            </p>
                        </div>
                        <div class="content2">
                            <div class="content2-1">
                                <div class="img"></div>
                                <div class="contentbox">
                                    <div class="text">距离情况</div>
                                    <div class="text2">距昆明长水机场<span
                                            style="color: #37D7FF;font-family: '微软雅黑粗体';">32.1</span>公里<span
                                            style="color: #37D7FF;font-family: '微软雅黑粗体';">35</span>分钟车程距昆明南站<span
                                            style="color: #37D7FF;font-family: '微软雅黑粗体';">64.2</span>公里<span
                                            style="color: #37D7FF;font-family: '微软雅黑粗体';">70</span>分钟车程</div>
                                </div>
                            </div>
                            <div class="content2-1">
                                <div class="img2"></div>
                                <div class="contentbox">
                                    <div class="text">位置示意</div>
                                    <div class="text2">汽车产业园已落户<span
                                            style="color: #37D7FF;font-family: '微软雅黑粗体';">北汽、江铃、东风云汽</span>三家整车厂以及少量零部件企业
                                    </div>
                                </div>
                            </div>
                            <div class="content2-1">
                                <div class="img3"></div>
                                <div class="contentbox">
                                    <div class="text">建成范围示意</div>
                                    <div class="text2">已建成<span
                                            style="color: #37D7FF;font-family: '微软雅黑粗体';">23000</span>平米，其中绿色区域为临时停车用地
                                    </div>
                                </div>
                            </div>
                            <p class="contentTitle">
                                坐落于昆明市主城区东北方，距离主城区50公里，位于嵩明县杨林经济技术开发区汽车产业园。
                            </p>
                            <p class="contentTitle">
                                总用地面积454亩，净用地421亩，规划建设占地面积约2.2万平方米的海外适应性试验等效替代高原场景库项建设项目。
                            </p>
                        </div>
                    </div>
                </div>
                <div class="box3">
                    <div class="headbox">
                        <div class="headImg"></div>
                        <div class="title">业务能力</div>
                    </div>
                    <div class="contentbox">
                        <div class="content">
                            <div class="main-title">{{ currentItem.mainTitle }}</div>
                            <div class="left-buttons">
                                <div class="btn-item" v-for="(item, index) in leftbottom" :key="index"
                                    :class="{ active: currentIndex === index }" @click="handleClick1(index)">
                                    {{ item.subTitle }}
                                </div>
                            </div>
                            <div class="right-content">
                                <div class="text-content">
                                    <div class="blue-dot-list">
                                        <div class="dot-item" v-for="(desc, i) in currentItem.blueDescriptions"
                                            :key="i">
                                            <span class="blue-dot">■</span>
                                            <span class="dot-text">{{ desc }}</span>
                                        </div>
                                    </div>
                                    <div class="white-dot-list">
                                        <div class="dot-item" v-for="(func, i) in currentItem.functions" :key="i">
                                            <span class="white-dot"></span>
                                            <span class="dot-text">{{ func }}</span>
                                        </div>
                                    </div>
                                </div>
                                <!-- 图片区域 -->
                                <div class="image-content">
                                    <!-- <img :src="currentItem.imageUrl" :alt="currentItem.subTitle" class="main-image"> -->
                                    <!-- 多图网格（如果有） -->
                                    <div class="image-grid"
                                        v-if="currentItem.imageGrid && currentItem.imageGrid.length">
                                        <img :src="img" :alt="`${currentItem.subTitle}截图${i + 1}`" class="grid-image"
                                            v-for="(img, i) in currentItem.imageGrid" :key="i">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="content">
                            <div class="main-title">{{ currentItem2.mainTitle }}</div>
                            <div class="left-buttons2">
                                <div class="btn-item2" v-for="(item, index) in leftbottom2" :key="index"
                                    :class="{ active: currentIndex2 === index }" @click="handleClick2(index)">
                                    {{ item.subTitle }}
                                </div>
                            </div>
                            <div class="right-content">
                                <div class="text-content">
                                    <div class="blue-dot-list">
                                        <div class="dot-item" v-for="(desc, i) in currentItem2.blueDescriptions"
                                            :key="i">
                                            <span class="blue-dot">■</span>
                                            <span class="dot-text">{{ desc }}</span>
                                        </div>
                                    </div>
                                    <div class="white-dot-list">
                                        <div class="dot-item" v-for="(func, i) in currentItem2.functions" :key="i">
                                            <span class="white-dot"></span>
                                            <span class="dot-text">{{ func }}</span>
                                        </div>
                                    </div>
                                </div>
                                <!-- 图片区域 -->
                                <div class="image-content2">
                                    <img :src="currentItem2.imageUrl" :alt="currentItem2.subTitle" class="main-image2">
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
            <!-- 中间内容 -->
            <div class="middle">
                <div class="img1"></div>
                <div class="img2"></div>
                <div class="content">
                    <div class="years"><span style="font-family: '微软雅黑粗体';">2017.6.15</span></div>
                    <div class="values">中汽中心与云南滇中新区正式签约</div>
                </div>
                <div class="content2">
                    <div class="years"><span style="font-family: '微软雅黑粗体';">2017.7.31</span></div>
                    <div class="values">卡达克机动车质量检验中心 (云南)有限公司成立</div>
                </div>
                <div class="content3">
                    <div class="years"><span style="font-family: '微软雅黑粗体';">2017.12.18</span></div>
                    <div class="values">启动奠基仪式</div>
                </div>
                <div class="content4">
                    <div class="years"><span style="font-family: '微软雅黑粗体';">2018.3.29</span></div>
                    <div class="values">一期工程开工建设</div>
                </div>
                <div class="content5">
                    <div class="years"><span style="font-family: '微软雅黑粗体';">2019.4.23</span></div>
                    <div class="values">公司更名中汽研汽车检验中心(昆明)有限公司</div>
                </div>
                <div class="content6">
                    <div class="years"><span style="font-family: '微软雅黑粗体';">2019.7.11</span></div>
                    <div class="values">一期工程正式落成</div>
                </div>
                <div class="content7">
                    <div class="years"><span style="font-family: '微软雅黑粗体';">2020.1</span></div>
                    <div class="values">正式投入运营</div>
                </div>
                <div class="content15">中汽研汽车检验中心（昆明）有限公司</div>
                <div class="content18">
                    <div class="tubiao1"></div>
                    <span class="tubiaoTitle">成立时间<span class="tubiaoValue">2017</span>年</span>
                    <div class="tubiao2"></div>
                    <span class="tubiaoTitle">总投资<span class="tubiaoValue">15</span>亿元</span>
                    <div class="tubiao3"></div>
                    <span class="tubiaoTitle">子公司<span class="tubiaoValue">454</span>亩</span>
                </div>
                <div class="content19">
                    <div class="img1"></div>
                    <div class="img2"></div>
                    <div class="img3"></div>
                    <span class="title">上海</span>
                    <div class="pointImg"></div>
                    <div class="img4"></div>
                    <div class="img5"></div>
                    <div ref="lottieRef" class="lottie-box"></div>
                </div>
            </div>
            <!-- 右边内容 -->
            <div class="right">
                <div class="box">
                    <div class="headbox">
                        <div class="headImg"></div>
                        <div class="title">业务能力</div>
                    </div>
                    <div class="contentbox">
                        <div class="content">
                            <div class="main-title">{{ currentItem3.mainTitle }}</div>
                            <div class="left-buttons2">
                                <div class="btn-item2" v-for="(item, index) in rightbottom1" :key="index"
                                    :class="{ active: currentIndex3 === index }" @click="handleClick3(index)">
                                    {{ item.subTitle }}
                                </div>
                            </div>
                            <div class="right-content">
                                <div class="text-content">
                                    <div class="blue-dot-list">
                                        <div class="dot-item" v-for="(desc, i) in currentItem3.blueDescriptions"
                                            :key="i">
                                            <span class="blue-dot">■</span>
                                            <span class="dot-text">{{ desc }}</span>
                                        </div>
                                    </div>
                                    <div class="white-dot-list">
                                        <div class="dot-item" v-for="(func, i) in currentItem3.functions" :key="i">
                                            <span class="white-dot"></span>
                                            <span class="dot-text">{{ func }}</span>
                                        </div>
                                    </div>
                                </div>
                                <!-- 图片区域 -->
                                <div class="image-content2">
                                    <img :src="currentItem3.imageUrl" :alt="currentItem3.subTitle" class="main-image2">
                                </div>
                            </div>
                        </div>
                        <div class="content">
                            <div class="main-title">政府及行业服务</div>
                            <div class="content2-1">
                                <div class="leftcontent">
                                    <div class="text">
                                        依托中汽中心汽车行业权威智库的技术优势，长期为云南省工信厅、生态环境厅等政府主管部门提供产业政策、技术支持、监督
                                        <span style="color: #37D7FF;">云南省工信厅、生态环境厅等政府主管部门提供产业政策、技术支持、监督抽查等支撑工作</span>
                                        ，相关成果得到有关单位的高度认可。
                                    </div>
                                </div>
                                <div class="middlecontent"></div>
                                <!-- 右侧动态内容（图片+文字+切换圆点） -->
                                <div class="rightcontent">
                                    <!-- 图片区域 -->
                                    <div class="imgcontent">
                                        <img :src="currentItemdot.imageUrl" :alt="currentItemdot.altText" class="img">
                                    </div>
                                    <!-- 文字描述 -->
                                    <div class="text">
                                        {{ currentItemdot.description }}
                                    </div>
                                    <!-- 切换圆点指示器（4个） -->
                                    <div class="dots-container">
                                        <div class="dot" v-for="(item, index) in rightData" :key="index"
                                            :class="{ active: currentIndexdot === index }"
                                            @click="handleDotClick(index)"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="box3">
                    <div class="headbox">
                        <div class="headImg"></div>
                        <div class="title">发展规划</div>
                    </div>
                    <div class="contentbox">
                        <div class="content">
                            <div class="content1-1">战略总图</div>
                            <div class="content1-2">
                                <div class="leftcontent">
                                    <div class="text">愿景</div>
                                    <div class="text" style="position: relative; top: -30px;">战略目标</div>
                                    <div class="text">集团规划重点任务</div>
                                    <div class="textcontent">
                                        <div class="text">总体目标</div>
                                        <div class="text">三个领先</div>
                                        <div class="text">总体目标</div>
                                    </div>

                                </div>
                                <div class="rightcontent">
                                    <div class="text">成就和谐汽车社会</div>
                                    <div class="text">成为政府最认可的产业智库、成为行业最尊重的合作伙伴 成为公众最信赖的权威机构、成为员工最自豪的事业平台</div>
                                    <div class="rightcontentbox1">
                                        <div class="leftcontent1-1">
                                            <div class="lefttext">以强制性法规检测和研发验证测试为基础，逐步建立健全三高测试服务能力</div>
                                            <div class="lefttext1">
                                                加巩固传统领域优势地位，以细分技术领域为发展主线，加快提升研发验证业务比重，聚焦行业需求建设测试能力，延伸完善测试服务能力</div>
                                            <div class="lefttext1">逐步建立健全汽车整车及零部件“高原—高温—高湿”全气候极限环境测试服务能力</div>
                                        </div>
                                        <div class="rightcontent1-1">
                                            <div class="righttext">强化细分领域特色检测优势，打造三高特色领域、道路测试领域专精特新</div>
                                            <div class="righttext1">
                                                专项特色细分领域测试平台：高原多燃料发动机集装箱式台架试验室能力、高原整车性能测试能力、海外适应性测试能力
                                            </div>
                                            <div class="righttext1">高原排放/油耗测试与评价业务平台：下阶段排放标准/油耗高原测评技术研究与开发</div>
                                            <div class="righttext1">
                                                打造世界领先高原研发验证和测试基地：聚焦高原特色开展专、精、特、新高原研发验证、产品认证、政府服务及其他新兴领域业务
                                            </div>
                                        </div>
                                    </div>
                                    <div class="title">承接并结合自身定位内化形成总体目标</div>
                                    <div class="title2">打造成为世界一流的汽车及零部件高原研发验证和测试基地</div>
                                    <div class="textcontent">
                                        <div class="text">高原检测能力<span style="color: #FF4A4A;">领先布局</span></div>
                                        <div class="text">企业治理体系<span style="color: #FF4A4A;">领先效率</span></div>
                                        <div class="text">专业技术服务<span style="color: #FF4A4A;">领先品质</span></div>
                                    </div>
                                    <div class="textcontent">
                                        <div class="text"><span style="color: #FF4A4A;">践行</span>绿色发展理念</div>
                                        <div class="text"><span style="color: #FF4A4A;">履行</span>国有企业三大责任</div>
                                        <div class="text"><span style="color: #FF4A4A;">塑造</span>知名品牌形象</div>
                                    </div>
                                </div>
                            </div>
                            <div class="content1-3">
                                <div class="text">小而专</div>
                                <div class="text">小而精</div>
                                <div class="text">小而强</div>
                                <div class="text">小而美</div>
                            </div>
                        </div>
                        <div class="content2">
                            <div class="content2-1">
                                高原核心能力建设围绕昆明检验中心发展规划的“四大平台”布局，分步实施
                            </div>
                            <div class="content2-2" v-for="(item, index) in platformList" :key="index">
                                <div class="leftcontent2-1">{{ item.title }}</div>
                                <div class="leftcontent2-2">{{ index + 1 }}</div>
                                <div class="content2-3">
                                    <div class="leftcontent2-3">{{ item.mainTask }}</div>
                                    <!-- 循环渲染子任务 -->
                                    <div class="leftcontent2-4" v-for="(subTask, i) in item.subTasks" :key="i">
                                        {{ subTask }}
                                    </div>
                                </div>
                                <!-- 动态背景图区域 -->
                                <div class="leftcontent2-5" :style="{
                                    backgroundImage: `url(${item.bgImage})`,
                                    backgroundSize: 'cover',  // 确保图片覆盖区域
                                    backgroundPosition: 'center'  // 图片居中
                                }"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import lottie from 'lottie-web';
//路由
import { useRouter } from 'vue-router'
const router = useRouter();
const headTitle = ref('中国汽车技术研究中心有限公司数字沙盘')
// 响应式数据
const lottieRef = ref(null);
let animationInstance = null;
// 平台建设数据（包含每个项的背景图路径）
const platformList = ref([
    {
        title: "轻型车排放能耗测试平台建设",
        mainTask: "提升高原轻型车排放测试能力",
        subTasks: [
            "下阶段轻型车高原排放/油耗测试技术规范研究和应用"
        ],
        bgImage: "/imgs/kunming/image67.png"
    },
    {
        title: "发动机性能测试平台建设",
        mainTask: "完善车用发动机排放油耗和高原适应性测评能力",
        subTasks: [
            "传统燃料发动机高原产品适应性研发及测评关键技术研究与应用",
            "氢、氨发动机高原产品适应性研发及测评关键技术研究与应用"
        ],
        bgImage: "/imgs/kunming/image68.png"
    },
    {
        title: "重型车排放能耗测试平台建设",
        mainTask: "拓展高原检测能力，服务行业和政府",
        subTasks: [
            "重型车高原立体海拔实际道路排放测评技术研究与应用",
            "重型车高原转毂性能开发及测评关键技术研究与应用"
        ],
        bgImage: "/imgs/kunming/图片4.png"
    },
    {
        title: "整车性能及高原适应性测试平台建设",
        mainTask: "完善传统业务检测能力，积极开拓整车高原适应性测评项目",
        subTasks: [
            "资质能力建设"
        ],
        bgImage: "/imgs/kunming/image69.png"
    }
]);
// 1. 右侧动态数据（4项，对应4个圆点）
const rightData = ref([
    {
        imageUrl: "/imgs/kunming/image64.png", // 图片路径
        altText: "高原检测技术研讨会", // 图片alt
        description: "每年举办高原检测技术研讨会，引导行业关注高原产品研究"
    },
    {
        imageUrl: "/imgs/kunming/图片3.png", // 图片路径
        altText: "产业发展报告发布",
        description: "发布云南省汽车产业发展报告，为政策制定提供数据支撑"
    },
    {
        imageUrl: "/imgs/kunming/image66.png", // 图片路径
        altText: "机动车一致性检查",
        description: "开展机动车污染物一致性核查，保障排放法规执行"
    },
    {
        imageUrl: "/imgs/kunming/image63.jpeg", // 图片路径
        altText: "新能源汽车论坛",
        description: "举办新能源汽车产业论坛，推动行业交流与合作"
    }
]);
// 2. 状态管理：当前显示项索引（默认第1项）
const currentIndexdot = ref(0);
// 3. 当前显示的数据（计算属性）
const currentItemdot = ref(rightData.value[currentIndexdot.value]);
// 4. 点击圆点切换事件
const handleDotClick = (index) => {
    currentIndexdot.value = index;
    currentItemdot.value = rightData.value[index]; // 更新当前显示的图片和文字
};
// 自动切换定时器
const intervalRefdot = ref(null);
// 自动切换函数
const autoSwitchDot = () => {
    currentIndexdot.value = (currentIndexdot.value + 1) % rightData.value.length;
    currentItemdot.value = rightData.value[currentIndexdot.value];
};

// 组件挂载时启动定时器（5秒切换一次）
onMounted(() => {
    intervalRefdot.value = setInterval(autoSwitchDot, 5000);
});

// 组件卸载时清除定时器
onUnmounted(() => {
    if (intervalRefdot.value) clearInterval(intervalRefdot.value);
});

//左边底部数据1
const leftbottom = ref([
    // 第三组：整车适应性验证测试能力
    {
        mainTitle: "高原整车试验能力",
        subTitle: "整车适应性验证测试能力",
        blueDescriptions: [
            "利用云南特有的立体海拔气候环境和高原山区独特的地理环境，提供“整车环境适应性评价”测试方案；",
            "建立以元江、昆明、香格里拉为“根据地”的测试服务保障基地。"
        ],
        functions: [
            "整车高原适应性测试能力",
            "整车高温适应性测试能力",
            "整车立体海拔测试",
            "整车高原坡起性能测试",
            "技术背书"
        ],
        // imageUrl: "/images/plateau/vehicle-adaptation-main.jpg", // 主图
        imageGrid: [ // 多图网格
            "/imgs/kunming/图片3.png",
            "/imgs/kunming/图片4.png",
        ]
    },
    // 第四组：法规检测能力
    {
        mainTitle: "高原整车试验能力",
        subTitle: "法规检测能力",
        blueDescriptions: [
            "具备国家认可的高原机动车检测资质",
            "覆盖GB、ISO、UN R系列等标准"
        ],
        functions: [
            "整车排放法规检测",
            "动力性能法规测试",
            "环境适应性强制检验",
            "新能源汽车高原专项检测"
        ],
        // imageUrl: "/images/plateau/regulation-test.jpg",
        imageGrid: [
            "/imgs/kunming/图片1.png",
            "/imgs/kunming/图片2.png",
        ]
    }
]);
// 2. 状态管理
const currentIndex = ref(0); // 当前显示项索引
const intervalRef = ref(null); // 定时器引用
// 3. 计算属性：当前显示的项
const currentItem = ref(leftbottom.value[currentIndex.value]);
// 4. 切换逻辑点击切换
const handleClick1 = (index) => {
    currentIndex.value = index;
    currentItem.value = leftbottom.value[index];
    // 重置定时器（点击后重新计时5秒）
    resetInterval();
};
// 自动切换
const autoSwitch = () => {
    currentIndex.value = (currentIndex.value + 1) % leftbottom.value.length;
    currentItem.value = leftbottom.value[currentIndex.value];
};
// 重置定时器
const resetInterval = () => {
    if (intervalRef.value) {
        clearInterval(intervalRef.value);
    }
    intervalRef.value = setInterval(autoSwitch, 5000); // 5秒切换一次
};
// 5. 生命周期管理
onMounted(() => {
    // 初始化定时器
    intervalRef.value = setInterval(autoSwitch, 5000);
});
onUnmounted(() => {
    // 清除定时器，防止内存泄漏
    if (intervalRef.value) {
        clearInterval(intervalRef.value);
    }
});

//左边底部数据2
const leftbottom2 = ref([
    // 第一组：高原排放舱相关
    {
        mainTitle: "轻型车排放试验能力",
        subTitle: "高原排放舱",
        blueDescriptions: [
            "满足GB、EPA、ECE等法规"
        ],
        functions: [
            "轻型车排放/油耗/OBD等试验",
            "电动车续驶里程及能量消耗率试验",
            "混合动力汽车排放和能耗试验",
            "高原条件下环境模拟试验",
            "海外出口高原排放研发标定",
            "国七/欧七/墨西哥等标准测试"
        ],
        imageUrl: "/imgs/kunming/高原排放舱.png",
        imageGrid: [] // 无多图
    },
    // 第二组：高原蒸发及加油排放试验
    {
        mainTitle: "轻型车排放试验能力",
        subTitle: "高原蒸发及加油排放试验",
        blueDescriptions: [
            "满足GB、EPA、CARB、 ECE等法规",
        ],
        functions: [
            "轻型车蒸发、加油排放试验",
            "燃油蒸发系统加速老化试验",
            "碳罐性能试验",
            "蒸发烘烤及燃油系统研发验证"
        ],
        imageUrl: "/imgs/kunming/不同海拔RDE试验.png",
        imageGrid: []
    },
    // 第三组
    {
        mainTitle: "轻型车排放试验能力",
        subTitle: "不同海拔RDE试验",
        blueDescriptions: [
            "不同海拔（0~2400m）RDE测试",
        ],
        functions: [
            "极限条件（高低温、激烈工况）RDE",
            "高原条件下RDE典型工况实验室模拟（可变坡度、高低温）",
            "实际道路路况信息采集",
        ],
        imageUrl: "/imgs/kunming/高原耐久及PVE试验 高原环境模拟试验能力.png",
        imageGrid: []
    },
    // 第四组
    {
        mainTitle: "轻型车排放试验能力",
        subTitle: "高原耐久及PVE试验",
        blueDescriptions: [
        ],
        functions: [
            "高原污染物控制装置耐久性试验",
            "与道路模拟相关的整车性能试验",
            "不同燃料/电控车型PVE试验能力",
        ],
        imageUrl: "/imgs/kunming/高原蒸发及加油排放试验.png",
        imageGrid: []
    },
    // 第五组
    {
        mainTitle: "轻型车排放试验能力",
        subTitle: "高原环境模拟试验能力",
        blueDescriptions: [

        ],
        functions: [
            "-30℃~+60℃环境舱+快慢充电桩",
            "Dewesoft数采+温度/压力等传感器",
            "热平衡/空调/能量流/电平衡等试验",
        ],
        imageUrl: "/imgs/kunming/高原蒸发及加油排放试验.png",
        imageGrid: []
    },
]);
// 2. 状态管理
const currentIndex2 = ref(0); // 当前显示项索引
const intervalRef2 = ref(null); // 定时器引用
// 3. 计算属性：当前显示的项
const currentItem2 = ref(leftbottom2.value[currentIndex2.value]);
// 4. 切换逻辑
// 点击切换
const handleClick2 = (index) => {
    currentIndex2.value = index;
    currentItem2.value = leftbottom2.value[index];
    // 重置定时器（点击后重新计时5秒）
    resetInterval2();
};
// 自动切换
const autoSwitch2 = () => {
    currentIndex2.value = (currentIndex2.value + 1) % leftbottom2.value.length;
    currentItem2.value = leftbottom2.value[currentIndex2.value];
};
// 重置定时器
const resetInterval2 = () => {
    if (intervalRef2.value) {
        clearInterval(intervalRef2.value);
    }
    intervalRef2.value = setInterval(autoSwitch2, 5000); // 5秒切换一次
};
// 5. 生命周期管理
onMounted(() => {
    // 初始化定时器
    intervalRef2.value = setInterval(autoSwitch2, 5000);
});
onUnmounted(() => {
    // 清除定时器，防止内存泄漏
    if (intervalRef2.value) {
        clearInterval(intervalRef2.value);
    }
});

//右边顶部数据1
const rightbottom1 = ref([
    // 第一组：高原排放舱相关
    {
        mainTitle: "发动机试验能力",
        subTitle: "发动机高原性能测评",
        blueDescriptions: [
        ],
        functions: [
            "发动机高原标定（1914米）",
            "发动机0-5000米进排气海拔模拟标定",
            "发动机净功率试验",
            "发动机性能试验",
            "发动机国五、国六排放循环测试",
            "发动机非三、非四排放循环测试",
            "发动机中国工况高原研究"
        ],
        imageUrl: "/imgs/kunming/发动机高原性能测评.png",
        imageGrid: [] // 无多图
    },
    // 第二组：高原蒸发及加油排放试验
    {
        mainTitle: "发动机试验能力",
        subTitle: "重型车高原性能测评",
        blueDescriptions: [
        ],
        functions: [
            "重型车高原OBD测试",
            "高原烟度排放测试",
            "高原环境DPF累碳测试",
            "高原山区长上/下坡OBD验证",
            "立体海拔环境下整车PEMS测试",
            "发动机台架（重型车）比对验证及开发",
        ],
        imageUrl: "/imgs/kunming/重型车高原性能测评.png",
        imageGrid: []
    },
    // 第三组
    {
        mainTitle: "发动机试验能力",
        subTitle: "非道路移动机械高原性能测评",
        blueDescriptions: [
            "具备开展不同海拔下的非道路移动机第三、四阶段排气烟度、实际道路污染物排放试验测试及评价能力。",
        ],
        functions: [
            "发动机台架测试",
            "烟度测试",
            "不同海拔PEMS及高原适应性开发试验",
        ],
        imageUrl: "/imgs/kunming/非道路移动机械高原性能测评.png",
        imageGrid: []
    },
    // 第四组
    {
        mainTitle: "发动机试验能力",
        subTitle: "高原测试方法和标准研究",
        blueDescriptions: [
            "下阶段排放标准预研，牵头高海拔排放工作组，开展重型车、非道路移动机械、发动机高海拔测试方法和标准研究。"
        ],
        functions: [
            "PEMS设备高原使用要求",
            "OBD高原测评",
            "海拔模拟装置对发动机及测试系统要求的相关经验分享",
            "国七/T五标准预研",
        ],
        imageUrl: "/imgs/kunming/高原测试方法和标准研究.png",
        imageGrid: []
    },
    // 第五组
    {
        mainTitle: "发动机试验能力",
        subTitle: "不同海拔工程机械PEMS及高原适应性开发试验",
        blueDescriptions: [

        ],
        functions: [
            "海拔高度：1700m、1900m、2400m、3200m、3900-4300m",
            "试验项目：PEMS、高原适应性开发及研发验证试验",
        ],
        imageUrl: "/imgs/kunming/不同海拔工程机械PEMS及高原适应性开发试验.png",
        imageGrid: []
    },
]);
// 2. 状态管理
const currentIndex3 = ref(0); // 当前显示项索引
const intervalRef3 = ref(null); // 定时器引用
// 3. 计算属性：当前显示的项
const currentItem3 = ref(rightbottom1.value[currentIndex3.value]);
// 4. 切换逻辑点击切换
const handleClick3 = (index) => {
    currentIndex3.value = index;
    currentItem3.value = rightbottom1.value[index];
    // 重置定时器（点击后重新计时5秒）
    resetInterval3();
};
// 自动切换
const autoSwitch3 = () => {
    currentIndex3.value = (currentIndex3.value + 1) % rightbottom1.value.length;
    currentItem3.value = rightbottom1.value[currentIndex3.value];
};
// 重置定时器
const resetInterval3 = () => {
    if (intervalRef3.value) {
        clearInterval(intervalRef3.value);
    }
    intervalRef3.value = setInterval(autoSwitch3, 5000); // 5秒切换一次
};
// 5. 生命周期管理
onMounted(() => {
    // 初始化定时器
    intervalRef3.value = setInterval(autoSwitch3, 5000);
});
onUnmounted(() => {
    // 清除定时器，防止内存泄漏
    if (intervalRef3.value) {
        clearInterval(intervalRef3.value);
    }
});

// 2. 响应式状态：当前页码（0-2，对应3页内容）
const currentPage = ref(0);
// 3. 自动轮播定时器
let timer = null;
// 1. 响应式数据（支持动态更新）
const statsData = ref([
    {
        icon: '/imgs/shanghai/组 7752 拷贝 3(1).png', // 平均年龄图标
        label: '平均年龄',
        value: 33,
        unit: '岁',
    },
    {
        icon: '/imgs/shanghai/组 7752 拷贝 17(1).png', // 平均工作年限图标
        label: '平均工作年限',
        value: 9,
        unit: '年',
    },
    {
        icon: '/imgs/shanghai/组 7752 拷贝 16.png', // 硕士学历占比图标
        label: '硕士学历占比',
        value: 64,
        unit: '%',
    },
    {
        icon: '/imgs/shanghai/组 7752 拷贝 17.png', // 海外人才占比图标
        label: '海外人才占比',
        value: 20,
        unit: '%',
    }
]);
// 切换到指定页
const handleClick9 = (index) => {
    currentPage.value = index;
    resetTimer(); // 点击后重置定时器，避免立即自动切换
};
//跳转路由
const backHome = () => {
    router.push({ name: 'home' })
}
// 切换到下一页（循环）
const goToNextPage = () => {
    currentPage.value = (currentPage.value + 1) % pages.length;
};
// 重置定时器
const resetTimer = () => {
    clearInterval(timer);
    timer = setInterval(goToNextPage, 5000); // 5秒切换一次
};
//顶部第一块内容
const pages = [
    // 第1页内容
    {
        btnName: '国家技术标准创新基地（汽车）服务中心',
        text: '立足国际标准协同与产业赋能目标，依托国际标准合作机制，以实体化创新基地为载体，面向车企、科技公司、初创企业客户，围绕智能驾驶、数据安全、海外市场拓展场景，开展标准研究、成果展示、全链条服务，助力企业降低国际合规成本、缩短国际认证周期，优先进入全球供应链。',
        btnText: '协同网络',
        items: ['国内外车企', '科研机构', '标准化组织', '地方政府'],
        imgUrl: '/imgs/shanghai/1.png' // 第1页图片
    },
    // 第2页内容（结构不同：文本、项目、图片均不同）
    {
        btnName: 'C-ASAM 国际标准组织服务',
        text: 'C-ASAM 为会员单位提供智能网联汽车标准制定与研发领域国际化会员服务，包括但不限于下载和使用 ASAM 所有标准与白皮书、参加 ASAM 活动与标准制定项目、ASAM 年度奖项评选推荐、ASAM 标准进展报告等。另外，结合本土产业优势，为会员单位提供专题研究及咨询增值服务等内容',
        btnText: '',
        items: ['全球400+ 会员', '中国唯一官方代表单位', '国际标准制定与转化', '汽车供应链管理', '汽车产业专业标准'],
        imgUrl: '/imgs/shanghai/2.png' // 第2页图片
    },
    // 第3页内容（结构不同）
    {
        btnName: '职业技能标准服务能力',
        text: '基于对汽车服务全产业链职业技能的逐级解构，建立可量化、可认证、可追溯的岗位能力模型与培养路径。该体系依托中国机械工业教育协会、汽车人才培养基地生态联盟成员单位等，针对汽车领域产业链的实际用人需求，结合科研院所、高等院校、职业学院、技工院校等对应专业（方向）的人才培养规律，开发定制化课程教学资源，以满足人才供给与人才需求的紧密对接。',
        btnText: '',
        items: [''],
        imgUrl: '/imgs/shanghai/3.png' // 第3页图片
    }
];
// 2. 响应式状态：当前页码（0-4，对应5页内容）
const currentPage2 = ref(0);
// 3. 自动轮播定时器
let timer2 = null;
// 切换到指定页
const handleClick6 = (index) => {
    currentPage2.value = index;
    resetTimer2(); // 点击后重置定时器，避免立即自动切换
};
// 切换到下一页（循环）
const goToNextPage2 = () => {
    currentPage2.value = (currentPage2.value + 1) % pages2.length;
};
// 重置定时器
const resetTimer2 = () => {
    clearInterval(timer2);
    timer2 = setInterval(goToNextPage2, 5000); // 5秒切换一次
};
//底部第一块数据
const pages2 = [
    {
        btnName: '汽车数据跨境流通合规服务',
        text: '立足中国汽车产业全球化合规运营目标，我们以动态合规风险管理模型为内核，搭载 SaaS 订阅平台，整合“法规检查库 + 规则库 + 风险库 + 方案库”四大产品矩阵（含全球法规库作为基础支撑模块），联合法律政策与 AI 算法双引擎团队，为出海车企及生态伙伴提供覆盖数据跨境、本地化雇佣、认证合规的全链路服务。依托《临港新片区数据跨境流动分类分级管理办法（试行）》标准，已落地智能网联汽车等重要数据目录编制，提供政策咨询、场景评估等专项服务；同步开发重要数据识别、跨境安全评估等功能模块，实现中国与海外汽车数据双向安全流通。从标准到落地，从评估到实施，助力企业降本增效，让合规成为国际化发展助推器。',
        items: ['国家级标准背书', '合规一站式服务', '跨境法规数据', '出境标准体系'],
        imgUrl: '/imgs/shanghai/4.png'
    },
    {
        btnName: '中国汽车数据出境指导服务',
        text: '依托汽车数据跨境流动合规平台，为中国汽车企业提供全链路数据出境合规指导服务。 通过场景化数据清单精准定位出境范围，集成安全防护工具筑牢数据屏障，实时监测 流通动态确保可追溯，定制分层培训强化内生合规力，并整合国际规则库适配出海需 求。覆盖“识别 - 防护 - 流通 - 提升 - 对接”全周期，助力企业高效应对国内外监管， 平衡国内安全与国际规则，为中国汽车全球化发展守好数据安全关。',
        items: ['全链路支撑', '实时动态监管', '政企协同服务', '多维安全管理'],
        imgUrl: '/imgs/shanghai/5.png'
    },
    {
        btnName: '汽车研发性能数据技术服务',
        text: '围绕主机厂和设计公司在整车规划、车型定位和开发目标定义的对标数据需求，开展汽车性能数据积累、研究、分析、销售工作，构建国内外唯一覆盖乘用车、商用车及零部件全专业性能及结构数据的平台，高效支撑整车和零部件的产品规划与开发。',
        items: ['数据全景智核', '数据共建共享', '全周期服务覆盖'],
        imgUrl: '/imgs/shanghai/6.png'
    },
    {
        btnName: '汽车新生态产业链数据服务',
        text: '立足产业链精准协同与技术创新目标，开展互联网推广、互联网接口、数据传输等服务，以线上数字化平台 + 线下创新生态圈为载体，整合全球供应商及采购资源，实现最新创新技术发布，供需精准匹配、技术品牌营销、市场分析咨询等功能矩阵，促进 整零交流与价值链整合开放创新，为打造汽车新生态产业链提供综合数据服务。',
        items: ['多商城矩阵B2B 订货商城、跨境出口商城等', '直连全球供应商与多资源整合采购资源等', '多领域赋能技术、流量资金等'],
        imgUrl: '/imgs/shanghai/7.png'
    },
    {
        btnName: '汽车运管数据资源交易服务',
        text: '基于中汽中心牵头成立的智能新能源汽车数据产业联盟，搭建汽车运管数据资源交易平台，通过整合行业组织、海外海关、地方新能源汽车数据平台、企业平台等数据资源，构建全球汽车数据产品聚集地，为数据生产商、数据贸易商、数据加工商及数据应用商提供合规、权威、多样的数据产品。',
        items: ['权威国内外多源数据要素集', '数据要素融合智能装备', '汽车技术可信空间技术基座'],
        imgUrl: '/imgs/shanghai/8.png'
    }
];
// 2. 响应式状态：当前页码（0-2，对应3页内容）
const currentPage3 = ref(0);
// 3. 自动轮播定时器
let timer3 = null;
// 切换到指定页
// const handleClick3 = (index) => {
//     currentPage3.value = index;
//     resetTimer3(); // 点击后重置定时器，避免立即自动切换
// };
// 切换到下一页（循环）
const goToNextPage3 = () => {
    currentPage3.value = (currentPage3.value + 1) % pages3.length;
};
// 重置定时器
const resetTimer3 = () => {
    clearInterval(timer3);
    timer3 = setInterval(goToNextPage3, 5000); //5秒切换一次
};
//底部第二块内容
const pages3 = [
    // 第1页内容
    {
        btnName: '国产碰撞假人系列产品',
        text: '碰撞假人是汽车安全及技术标准体系的核心装备。为了攻关汽车安全领域“卡脖子技术”装备，自主创新中国化安全标准体系，中汽中心打造形成了集核心技术、关键装备、系统集成、检验检测自主可控的技术体系。中汽中心完全自研生产的中国体征假人后续将应用于 C-NCAP ，国产化 - 混Ⅲ系列碰撞假人 H Ⅲ -5、H Ⅲ -50、H Ⅲ -95 在性能、质量、外观全面对标国外同等品牌。目前国产碰撞假人已在多个国家级检测机构、主机厂、零部件厂商的相关法规试验中实际应用。',
        btnText: '协同网络',
        items: ['完全自主研发成本自主可控', '中国体征特色突破“卡脖子”'],
        imgUrl: '/imgs/shanghai/8.png' // 第1页图片
    },
    // 第2页内容（结构不同：文本、项目、图片均不同）
    {
        btnName: '高端自研国产测试装备',
        text: '在前沿标准与测评技术的指导下，立足于行业权威的检测技术与测试经验，履行行业职责，解决汽车行业在高端测试装备领域“技术垄断、成本控制、产业链安全”等痛点，在主被动安全、新能源、智能网联、节能环保等领域打造精准、可靠、领先的测试工具与配套服务',
        btnText: '',
        items: ['行业平台支撑示范应用先行', '先进技术赋能互动合作共赢'],
        imgUrl: '/imgs/shanghai/9.png' // 第2页图片
    },
    // 第3页内容（结构不同）
    {
        btnName: '充电性能兼容验证方案',
        text: '中汽科技（上海）与宁德时代科技联合开发的充电性能兼容验证方案，集交流和直流测试于一体，兼容了全球主流的充电标准，为客户提供标准充放电测试、自定义开发测试和海量中外案例库测试研究。主要针对开发验证不充分、案例少、开源度差、标准迭代升级快等问题，提供一整套高开放性和高集成度的解决方案。',
        btnText: '',
        items: ['样例测试丰富', '参数灵活可调', '法规应对及时', '欧标摸底应对'],
        imgUrl: '/imgs/shanghai/10.png' // 第3页图片
    }
];
// 2. 响应式状态：当前页码（0-2，对应3页内容）
const currentPage4 = ref(0);
// 3. 自动轮播定时器
let timer4 = null;
// 切换到指定页
const handleClick4 = (index) => {
    currentPage4.value = index;
    resetTimer4(); // 点击后重置定时器，避免立即自动切换
};
// 切换到下一页（循环）
const goToNextPage4 = () => {
    currentPage4.value = (currentPage4.value + 1) % pages4.length;
};
// 重置定时器
const resetTimer4 = () => {
    clearInterval(timer4);
    timer4 = setInterval(goToNextPage4, 5000); //5秒切换一次
};
//底部第二块内容
const pages4 = [
    // 第1页内容
    {
        btnName: '汽车先进功能验证服务',
        text: '以进一步落实华东一体化协同发展，彰显“高端技术枢纽”定位为目标，依托标准法规和 C-NCAP、C-ICAP 等测评体系打造智行、智泊、智舱三大核心产品服务能力。团队成立以来，每年完成汽车功能验证项目几十项，服务客户二十余家。面向整车制造商、技术方案解决商、零部件配套企业等全产业链，围绕封闭场地、公开道路、座舱大模型等业务场景，为行业提供从“技术标定”到“场景验证”的一体化技术解决方案，致力于成为华东地区领先、全国一流的汽车先进功能验证服务商。',
        btnText: '',
        items: ['标准化设备与场地', '20+核心客户群体', '华东一站式解决方案'],
        imgUrl: '/imgs/shanghai/12.png' // 第1页图片
    },
    // 第2页内容（结构不同：文本、项目、图片均不同）
    {
        btnName: '汽车产品技术咨询服务',
        text: '锚定“区城性汽车智库 + 高端技术枢纽 " 双定位，围绕“车路云一体化”规划建设、系统验证、场景落地等核心业务，组建一站式服务团队，打造“车路云一体化”咨询规划、产品验证两大服务能力，为行业提供从规划、建设到验证的一体化技术解决方案，致力于成为政企合作标杆，为行业发展提供关键力量。目前已服务多地政府及示范区，包括克拉玛依市车路云数字化综合服务项目、上海市奉贤区示范区车路协同应用建设项目等。',
        btnText: '',
        items: ['规划建设', '系统验证', '场景落地'],
        imgUrl: '/imgs/shanghai/13.png' // 第2页图片
    },
    // 第3页内容（结构不同）
    {
        btnName: '汽车国际化全链路服务',
        text: '以构建汽车先进技术产业生态、推动行业规范化发展为目标，依托国家级试点示范区运营经验，凭借产业政策研究、标准体系构建、示范区建设与运营等核心能力，面向各地方政府提供 “政策研究 - 标准制定 - 区域协同” 全链条咨询服务。团队汇聚行业专家，具备从顶层设计、场景规划到落地运营的系统化服务能力。已服务超 10 家政府部门，协助修订《上海市汽车智能化测试与示范实施办法》等 20 余项政策文件，助力长三角建立测试牌照互认机制，推动超 10 个跨区域商业化项目落地，覆盖 5000 公里测试道路资源，以政策精准化、产业规范化、生态协同化路径加速各地方汽车智能化与网联化商业化进程。',
        btnText: '',
        items: ['全国首创', '权威背书', '专家团队', '项目遍布全国', '成果导向'],
        imgUrl: '/imgs/shanghai/14.png' // 第3页图片
    }
];
// 2. 响应式状态：当前页码（0-2，对应3页内容）
const currentPage5 = ref(0);
// 3. 自动轮播定时器
let timer5 = null;
// 切换到指定页
const handleClick5 = (index) => {
    currentPage5.value = index;
    resetTimer5(); // 点击后重置定时器，避免立即自动切换
};
// 切换到下一页（循环）
const goToNextPage5 = () => {
    currentPage5.value = (currentPage5.value + 1) % pages5.length;
};
// 重置定时器
const resetTimer5 = () => {
    clearInterval(timer5);
    timer5 = setInterval(goToNextPage5, 5000); //5秒切换一次
};
//底部第二块内容
const pages5 = [
    // 第1页内容
    {
        btnName: '汽车国家职业数字展馆服务',
        text: '以产业需求为导向，通过整合产业资源、教育资源和评价资源，打造科学、专业、全面的汽车行业职业解读与职业规划的数字化平台，推动“岗位标准共建 - 课程资源开发-技能认证落地”的全链路协作，探索“产教评”深度融合，推进产业人才培养精准化、就业指导精细化和供需对接高效化，助力汽车企业从“人才需求方”转变为“人才定义者与培养者”。',
        btnText: '',
        items: ['国家级平台', '20+品牌形象与雇主价值传播', '人才标准领航', '产教评闭环生态'],
        imgUrl: '/imgs/shanghai/15.png' // 第1页图片
    },
    // 第2页内容（结构不同：文本、项目、图片均不同）
    {
        btnName: '汽车产教评一体化平台服务',
        text: '汽车产教评一体化平台服务聚焦产业人才培养中“岗位能力与系统需求错位、教育供给与产业需求脱节、人才转型评价体系僵化”三大痛点，以多方协同与供需适配机制为核心，赋能政企校行主体，贯穿人才“引用育留”全流程。平台深度整合 AI 能力，实现精准岗位匹配、个性化成长导航与动态能力评估，构建产教评深度融合的全链条培养新范式，驱动产业人才精准化培养与生态协同化发展。',
        btnText: '',
        items: ['AI全链条人才精准匹配', '政企校行协同生态平台', '产教评三维融合新范式'],
        imgUrl: '/imgs/shanghai/16.png' // 第2页图片
    },
    // 第3页内容（结构不同）
    {
        btnName: '高技术及高等学历教育服务',
        text: '依托国内外顶尖高校资源与行业领军专家团队，面向企业科技骨干、技术管理人员及高层次人才，聚焦战略性前瞻技术领域，打造覆盖高技术能力提升与高学历深造的全链条培养服务体系，帮助学员实现职业技能与学术能力的双重突破，全面增强企业在技术创新、战略布局和人才梯队建设方面的综合竞争力。',
        btnText: '',
        items: ['权威师资力量', '顶尖高校资源', '实战导向培养', '灵活学习机制'],
        imgUrl: '/imgs/shanghai/17.png' // 第3页图片
    },
    // 第4页内容（结构不同）
    {
        btnName: '国内外高技能人才培养服务',
        text: '构建基于标准化、面向国际化、覆盖产业链的汽车领域高技能人才培养体系，依托国内汽车人才培养基地生态联盟与海外“智车学堂”人才培养认证联盟的合作形式，针对紧密贴合产业企业用人实际需求的线上线下各类教学资源实施整合，旨在面向院校师生与企业技能人才，聚焦智能网联汽车、新能源汽车等前沿岗位，提供集理论培训、实操教学、岗位考核、能力评价于一体的全流程职业技能提升服务。',
        btnText: '',
        items: ['数字化结合实践灵活培训形式', '精准对接技能人才培养供给', '“中文 + 技能”助力产业链出海'],
        imgUrl: '/imgs/shanghai/18.png' // 第4页图片
    }

];
// 初始化 Lottie 动画
const initLottieAnimation = () => {
    if (lottieRef.value) {
        animationInstance = lottie.loadAnimation({
            container: lottieRef.value,
            path: '/animations/shanghai.json',
            loop: true,
            autoplay: true,
        });
    }
};
//跳转路由
const goToService = (item) => {
    router.push({ name: item })
}
onMounted(() => {
    timer = setInterval(goToNextPage, 5000);
    timer2 = setInterval(goToNextPage2, 5000);
    timer3 = setInterval(goToNextPage3, 5000);
    timer4 = setInterval(goToNextPage4, 5000);
    timer5 = setInterval(goToNextPage5, 5000);
    initLottieAnimation();
})
// 组件销毁时清除定时器（防止内存泄漏）
onUnmounted(() => {
    clearInterval(timer);
    clearInterval(timer2);
    clearInterval(timer3);
    clearInterval(timer4);
    clearInterval(timer5);
});
</script>
<style scoped>
@keyframes sweep {
    0% {
        background-position: -100%;
    }

    100% {
        background-position: 200%;
    }
}

/* 上下浮动动画 */
@keyframes floatUpDown {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-20px);
        /* 向下移动20px */
    }
}

/* 可视区域容器：固定为目标分辨率6240*1456 */
.page-container {
    width: 6240px;
    height: 1456px;
    overflow: hidden;
    position: relative;
    margin: 0 auto;
}

/* 原始设计稿容器：基于9600*2240，通过缩放适配新分辨率 */
.scale-container {
    width: 9600px;
    height: 2240px;
    transform: scale(0.65);
    transform-origin: 0 0;
    position: relative;
}


.lottie-box {
    z-index: 99;
    position: absolute;
    left: 969px;
    top: 386px;
    width: 885px;
    height: 889px;
    font-size: 80px;
}

.headTitle {
    text-align: center;
    position: relative;
    top: -24px;
    font-size: 130px;
    font-family: YouSheBiaoTiHei;
    font-weight: 400;
    color: #FFFFFF;
    background: linear-gradient(0deg, rgba(0, 216, 255, 0.66) 10%, rgba(255, 255, 255, 1) 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.headButton {
    cursor: pointer;
    display: flex;
    float: inline-end;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 78px;
    height: 78px;
    background-image: url("/imgs/ningbo/cancel.png");
    background-position: left;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.left {
    display: flex;
    flex-direction: column;

    .box {
        margin-left: 140px;
        display: flex;
        flex-direction: column;

        .headbox {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            width: 2246px;
            height: 168px;
            background-image: url("/imgs/ningbo/t(1).png");
            background-position: left;
            background-size: 100% 100%;
            background-repeat: no-repeat;

            .headImg {
                margin-left: 220px;
                margin-top: 41px;
                width: 53px;
                height: 58px;
                background-image: url("/imgs/ningbo/菱形 拷贝.png");
                background-position: left;
                background-size: 100% 100%;
                background-repeat: no-repeat;
            }

            .title {
                margin-left: 30px;
                margin-top: 22px;
                height: 49px;
                font-family: "微软雅黑粗体";
                font-weight: 400;
                font-size: 57px;
                color: #FFFFFF;
            }
        }

        .contentbox {
            display: flex;
            flex-direction: row;

            .content {
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                align-items: flex-start;
                width: 1476px;
                height: 1096px;
                background-image: url("/imgs/ningbo/矩形 933 拷贝 3.png");
                background-position: left;
                background-size: 100% 100%;
                background-repeat: no-repeat;

                .img1 {
                    width: 1407px;
                    height: 646px;
                }

                .contentTitle {
                    padding: 0 20px;
                    text-align: justify;
                    text-justify: inter-ideograph;
                    position: relative;
                    line-height: 60px;
                    top: -12px;
                    text-indent: 3.5ch;
                    width: 1356px;
                    font-family: "微软雅黑常规";
                    font-weight: 400;
                    font-size: 34px;
                    color: #FFFFFF;
                }
            }

            .content2 {
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                align-items: flex-start;
                width: 1476px;
                height: 1096px;
                background-image: url("/imgs/ningbo/矩形 933 拷贝 3.png");
                background-position: left;
                background-size: 100% 100%;
                background-repeat: no-repeat;
                padding: 60px;
                gap: 20px;

                .content2-1 {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;

                    .img {
                        border-radius: 10px;
                        width: 431px;
                        height: 368px;
                        background-image: url("/imgs/kunming/距离情况.png");
                        background-position: left;
                        background-size: 100% 100%;
                        background-repeat: no-repeat;
                    }

                    .img2 {
                        border-radius: 10px;
                        width: 431px;
                        height: 368px;
                        background-image: url("/imgs/kunming/位置示意.png");
                        background-position: left;
                        background-size: 100% 100%;
                        background-repeat: no-repeat;
                    }

                    .img3 {
                        border-radius: 10px;
                        width: 431px;
                        height: 368px;
                        background-image: url("/imgs/kunming/建成范围示意.jpeg");
                        background-position: left;
                        background-size: 100% 100%;
                        background-repeat: no-repeat;
                    }

                    .contentbox {
                        display: flex;
                        flex-direction: column;
                        gap: 60px;
                        align-items: center;
                        width: 431px;
                        height: 301px;
                        background-image: url("/imgs/kunming/矩形 989 拷贝 3.png");
                        background-position: left;
                        background-size: 100% 100%;
                        background-repeat: no-repeat;
                        text-align: center;

                        .text {
                            width: 305px;
                            font-family: "微软雅黑粗体";
                            font-size: 35px;
                            color: #FFFFFF;
                            line-height: 44px;
                        }

                        .text2 {
                            width: 329px;
                            font-family: "微软雅黑常规";
                            font-weight: 400;
                            font-size: 28px;
                            color: #FFFFFF;
                            line-height: 45px;
                        }
                    }
                }

                .contentTitle {
                    padding: 0 20px;
                    text-align: justify;
                    text-justify: inter-ideograph;
                    position: relative;
                    line-height: 60px;
                    top: -12px;
                    text-indent: 3.5ch;
                    width: 1356px;
                    font-family: "微软雅黑常规";
                    font-weight: 400;
                    font-size: 34px;
                    color: #FFFFFF;
                }
            }
        }

    }

    .box2 {
        margin-left: 132px;
        display: flex;

        .headImg {
            margin-left: 220px;
            margin-top: 41px;
            width: 53px;
            height: 58px;
            background-image: url("/imgs/ningbo/菱形 拷贝.png");
            background-position: left;
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }

        .title {
            margin-left: 30px;
            margin-top: 22px;
            height: 49px;
            font-family: "微软雅黑粗体";
            font-weight: 400;
            font-size: 57px;
            color: #FFFFFF;
        }

        .content {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: flex-start;
            position: absolute;
            top: 378px;
            width: 1476px;
            height: 1096px;
            background-image: url("/imgs/ningbo/矩形 933 拷贝 3.png");
            background-position: left;
            background-size: 100% 100%;
            background-repeat: no-repeat;

            .img1 {
                width: 1407px;
                height: 646px;
            }

            .contentTitle {
                padding: 0 20px;
                text-align: justify;
                text-justify: inter-ideograph;
                position: relative;
                line-height: 60px;
                top: -98px;
                text-indent: 3.5ch;
                width: 1356px;
                height: 100px;
                font-family: "微软雅黑常规";
                font-weight: 400;
                font-size: 34px;
                color: #FFFFFF;
            }
        }
    }

    .box3 {
        display: flex;
        margin-left: 132px;
        display: flex;
        flex-direction: column;

        .headbox {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            width: 2246px;
            height: 168px;
            background-image: url("/imgs/ningbo/t(1).png");
            background-position: left;
            background-size: 100% 100%;
            background-repeat: no-repeat;

            .headImg {
                margin-left: 220px;
                margin-top: 41px;
                width: 53px;
                height: 58px;
                background-image: url("/imgs/ningbo/菱形 拷贝.png");
                background-position: left;
                background-size: 100% 100%;
                background-repeat: no-repeat;
            }

            .title {
                margin-left: 30px;
                margin-top: 22px;
                height: 49px;
                font-family: "微软雅黑粗体";
                font-weight: 400;
                font-size: 57px;
                color: #FFFFFF;
            }
        }

        .contentbox {
            display: flex;
            flex-direction: row;
            gap: 20px;

            .content {
                align-items: anchor-center;
                top: 178px;
                gap: 30px;
                width: 1461px;
                height: 489px;
                background-image: url("/imgs/shanghai/矩形 933 拷贝 3.png");
                background-position: left;
                background-size: 100% 100%;
                background-repeat: no-repeat;
                display: flex;
                flex-wrap: wrap;
                align-content: center;
                justify-content: center;
                flex-direction: row;

                .main-title {
                    position: relative;
                    left: 10px;
                    writing-mode: vertical-rl;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    text-align: center;
                    padding: 10px;
                    font-family: "微软雅黑粗体";
                    font-size: 36px;
                    color: #FFFFFF;
                    line-height: 32px;
                    background: linear-gradient(0deg, rgba(46, 131, 183, 0.66) 10%, rgba(255, 255, 255, 1) 70%);
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                }

                /* 左侧按钮区域 */
                .left-buttons {
                    width: 220px;
                    display: flex;
                    flex-direction: column;
                    gap: 10px;

                    .btn-item {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        text-align: center;
                        padding: 10px;
                        cursor: pointer;
                        font-family: "微软雅黑粗体";
                        font-size: 26px;
                        color: #FFFFFF;
                        line-height: 36px;
                        width: 237px;
                        height: 217px;
                        background-image: url("/imgs/kunming/矩形 1269(5).png");
                        background-position: left;
                        background-size: 100% 100%;
                        background-repeat: no-repeat;
                    }

                    .btn-item.active {
                        width: 237px;
                        height: 217px;
                        background-image: url("/imgs/kunming/矩形 1269(4).png");
                        background-position: left;
                        background-size: 100% 100%;
                        background-repeat: no-repeat;
                    }
                }

                /* 左侧按钮区域 */
                .left-buttons2 {
                    width: 220px;
                    display: flex;
                    flex-direction: column;
                    gap: 10px;

                    .btn-item2 {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        text-align: center;
                        padding: 10px;
                        cursor: pointer;
                        font-family: "微软雅黑粗体";
                        font-size: 26px;
                        color: #FFFFFF;
                        line-height: 36px;
                        width: 237px;
                        height: 82px;
                        background-image: url("/imgs/kunming/矩形 1269(3).png");
                        background-position: left;
                        background-size: 100% 100%;
                        background-repeat: no-repeat;
                    }

                    .btn-item2.active {
                        width: 237px;
                        height: 82px;
                        background-image: url("/imgs/kunming/矩形 1269(2).png");
                        background-position: left;
                        background-size: 100% 100%;
                        background-repeat: no-repeat;
                    }
                }

                /* 右侧内容区域 */
                .right-content {
                    flex: 1;
                    display: flex;
                    gap: 30px;
                    padding: 20px;
                    width: 1098px;
                    height: 442px;
                    background-image: url("/imgs/kunming/矩形 933 拷贝 7.png");
                    background-position: left;
                    background-size: 100% 100%;
                    background-repeat: no-repeat;

                    /* 图片区域 */
                    .image-content {
                        width: 358px;
                        display: flex;
                        flex-direction: column;
                        gap: 15px;

                        .main-image {
                            width: 358px;
                            height: 197px;
                            object-fit: cover;
                            border-radius: 4px;
                        }

                        /* 多图网格 */
                        .image-grid {
                            display: flex;
                            flex-direction: column;
                            gap: 10px;

                            .grid-image {
                                width: 358px;
                                height: 197px;
                                object-fit: cover;
                                border-radius: 2px;
                            }
                        }
                    }

                    /* 图片区域 */
                    .image-content2 {
                        width: 490px;
                        display: flex;
                        flex-direction: column;
                        gap: 15px;

                        .main-image2 {
                            width: 490px;
                            height: 374px;
                            object-fit: cover;
                            border-radius: 4px;
                        }
                    }

                    /* 文本内容区 */
                    .text-content {
                        flex: 1;
                        color: white;

                        /* 蓝色方块列表 */
                        .blue-dot-list {
                            margin-bottom: 40px;

                            .dot-item {
                                display: flex;
                                align-items: flex-start;
                                font-family: "微软雅黑常规";
                                font-weight: 400;
                                font-size: 24px;
                                color: #FFFFFF;
                                line-height: 48px;

                                .blue-dot {
                                    color: #49B8FF;
                                    margin-right: 10px;
                                    font-size: 18px;
                                }

                                .dot-text {
                                    flex: 1;
                                }
                            }
                        }

                        /* 白色圆点列表 */
                        .white-dot-list {
                            display: flex;
                            flex-wrap: wrap;
                            flex-direction: row;

                            .dot-item {
                                display: flex;
                                align-items: flex-start;
                                font-family: "微软雅黑常规";
                                font-weight: 400;
                                font-size: 24px;
                                color: #FFFFFF;
                                line-height: 48px;

                                .white-dot {
                                    position: relative;
                                    top: 10px;
                                    width: 20px;
                                    height: 20px;
                                    background-image: url("/imgs/guangzhou/椭圆 767.png");
                                    background-position: left;
                                    background-size: 100% 100%;
                                    background-repeat: no-repeat;
                                }

                                .dot-text {
                                    flex: 1;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

.middle {
    position: absolute;
    left: 3364px;
    top: 257px;
    width: 2874px;
    height: 521px;
    background-image: url("/imgs/ningbo/矩形 606.png");
    background-position: left;
    background-size: 100% 100%;
    background-repeat: no-repeat;

    .img1 {
        position: relative;
        left: 105px;
        top: 135px;
        width: 485px;
        height: 160px;
        background-image: url("/imgs/kunming/标记 (1).png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }

    .img2 {
        position: relative;
        left: 800px;
        top: 20px;
        width: 1900px;
        height: 75px;
        background-image: url("/imgs/guangzhou/heng.png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }

    .content {
        top: -136px;
        left: 732px;
        position: relative;
        width: 300px;

        .years {
            font-family: "微软雅黑常规";
            font-weight: bold;
            font-size: 29px;
            color: #D6F9FF;
            line-height: 43px;
        }

        .values {
            font-family: "微软雅黑常规";
            font-weight: 400;
            font-size: 18px;
            color: #D6F9FF;
            line-height: 29px;
        }
    }

    .content2 {
        top: -40px;
        left: 1100px;
        position: relative;
        width: 300px;

        .years {
            font-family: "微软雅黑常规";
            font-weight: bold;
            font-size: 29px;
            color: #D6F9FF;
            line-height: 43px;
        }

        .values {
            font-family: "微软雅黑常规";
            font-weight: 400;
            font-size: 18px;
            color: #D6F9FF;
            line-height: 29px;
        }
    }

    .content3 {
        top: -305px;
        left: 1495px;
        position: relative;
        width: 300px;

        .years {
            font-family: "微软雅黑常规";
            font-weight: bold;
            font-size: 29px;
            color: #D6F9FF;
            line-height: 43px;
        }

        .values {
            font-family: "微软雅黑常规";
            font-weight: 400;
            font-size: 18px;
            color: #D6F9FF;
            line-height: 29px;
        }
    }

    .content4 {
        top: -215px;
        left: 1749px;
        position: relative;
        width: 200px;

        .years {
            font-family: "微软雅黑常规";
            font-weight: bold;
            font-size: 29px;
            color: #D6F9FF;
            line-height: 43px;
        }

        .values {
            width: 326px;
            font-family: "微软雅黑常规";
            font-weight: 400;
            font-size: 18px;
            color: #D6F9FF;
            line-height: 29px;
        }
    }

    .content5 {
        top: -485px;
        left: 2004px;
        position: relative;
        width: 300px;

        .years {
            font-family: "微软雅黑常规";
            font-weight: bold;
            font-size: 29px;
            color: #D6F9FF;
            line-height: 43px;
        }

        .values {
            width: 300px;
            font-family: "微软雅黑常规";
            font-weight: 400;
            font-size: 18px;
            color: #D6F9FF;
            line-height: 29px;
        }
    }

    .content6 {
        top: -384px;
        left: 2357px;
        position: relative;
        width: 300px;

        .years {
            font-family: "微软雅黑常规";
            font-weight: bold;
            font-size: 29px;
            color: #D6F9FF;
            line-height: 43px;
        }

        .values {
            width: 300px;
            font-family: "微软雅黑常规";
            font-weight: 400;
            font-size: 18px;
            color: #D6F9FF;
            line-height: 29px;
        }
    }

    .content7 {
        top: -620px;
        left: 2586px;
        position: relative;
        width: 300px;

        .years {
            font-family: "微软雅黑常规";
            font-weight: bold;
            font-size: 29px;
            color: #D6F9FF;
            line-height: 43px;
        }

        .values {
            width: 300px;
            font-family: "微软雅黑常规";
            font-weight: 400;
            font-size: 18px;
            color: #D6F9FF;
            line-height: 29px;
        }
    }

    .content15 {
        display: flex;
        transform: translateX(86%);
        position: absolute;
        top: 420px;
        font-family: FZLanTingHeiS-B-GB;
        font-weight: 400;
        font-size: 53px;
        color: #FFFFFF;
        background: linear-gradient(0deg, rgba(46, 131, 183, 0.66) 10%, rgba(255, 255, 255, 1) 70%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        width: 1100px;
    }

    .content18 {
        top: 550px;
        z-index: 999;
        display: flex;
        position: absolute;
        justify-content: center;
        align-content: center;
        justify-self: anchor-center;
        /* left: 97px; */
        z-index: 999;

        .tubiao1 {
            width: 102px;
            height: 102px;
            background-image: url("/imgs/shanghai/组 7752 拷贝 3.png");
            background-position: left;
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }

        .tubiao2 {
            width: 102px;
            height: 102px;
            background-image: url("/imgs/kunming/资产.png");
            background-position: left;
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }

        .tubiao3 {
            width: 102px;
            height: 102px;
            background-image: url("/imgs/kunming/亩.png");
            background-position: left;
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }

        .tubiaoTitle {
            margin-left: 20px;
            margin-right: 20px;
            position: relative;
            top: -29px;
            width: auto;
            font-family: FZLanTingHeiS-B-GB;
            font-weight: 400;
            font-size: 42px;
            color: #FFFFFF;
            background: linear-gradient(0deg, rgba(46, 131, 183, 0.66) 10%, rgba(255, 255, 255, 1) 70%);
            -webkit-background-clip: text;

            .tubiaoValue {
                position: relative;
                top: 9px;
                margin-left: 20px;
                margin-right: 20px;
                font-family: YouSheBiaoTiHei;
                font-weight: 400;
                font-size: 86px;
                color: #FFFFFF;
                -webkit-text-fill-color: transparent;
                background: linear-gradient(45deg,
                        transparent 35%,
                        rgba(#fff, 0.6),
                        transparent 65%) no-repeat,
                    currentColor;
                background-size: 50%;
                -webkit-background-clip: text;
                animation: sweep 2s infinite;
                background: linear-gradient(0deg, rgba(0, 216, 255, 0.66) 10%, rgba(255, 255, 255, 1) 70%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
            }
        }
    }

    .content19 {
        display: flex;
        position: absolute;
        top: 420px;
        left: 0;
        width: 2808px;
        height: 1641px;
        background-image: url("/imgs/ningbo/中间地球 2副本.png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;

        .img1 {
            position: relative;
            left: 532px;
            top: 287px;
            width: 1467px;
            height: 1199px;
            background-image: url("/imgs/ningbo/组 7764.png");
            background-position: left;
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }

        .img2 {
            transform: scaleX(1.5);
            position: relative;
            left: 195px;
            top: 846px;
            width: 143px;
            height: 157px;
            background-image: url("/imgs/shanghai/形状 797 拷贝 2.png");
            background-position: left;
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }

        .img3 {
            z-index: 99999;
            position: relative;
            left: 156px;
            top: 942px;
            width: 34px;
            height: 45px;
            background-image: url("/imgs/ningbo/点位 (3).png");
            background-position: left;
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }

        .img4 {
            position: absolute;
            left: -200px;
            top: 170px;
            width: 620px;
            height: 884px;
            background-image: url("/imgs/ningbo/CFL.png");
            background-position: left;
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }

        .img5 {
            position: absolute;
            right: -200px;
            top: 170px;
            width: 620px;
            height: 884px;
            background-image: url("/imgs/ningbo/CFL.png");
            transform: scaleX(-1);
            background-position: left;
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }


        .title {
            left: 1680px;
            top: 986px;
            position: absolute;
            font-family: FZLanTingHeiS-B-GB;
            font-weight: 400;
            font-size: 38px;
            color: #FFFFFF;
            background: linear-gradient(0deg, #E9DD7A 100%, #FFFFFF 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .pointImg {
            position: absolute;
            top: 378px;
            left: 895px;
            width: 918px;
            height: 933px;
            background-image: url("/imgs/ningbo/组 7768 拷贝.png");
            background-position: left;
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }
    }
}

.right {
    display: flex;
    position: absolute;
    flex-direction: row;
    flex-wrap: wrap;
    left: 6363px;
    top: 200px;

    .box {
        display: flex;
        flex-direction: column;
        margin-left: 73px;

        .headbox {
            display: flex;
            height: 158px;
            width: 1246px;
            flex-wrap: nowrap;
            flex-direction: row;
            background-image: url("/imgs/ningbo/t(1).png");
            background-position: left;
            background-size: 100% 100%;
            background-repeat: no-repeat;

            .headImg {
                margin-left: 220px;
                margin-top: 41px;
                width: 53px;
                height: 58px;
                background-image: url("/imgs/ningbo/菱形 拷贝.png");
                background-position: left;
                background-size: 100% 100%;
                background-repeat: no-repeat;
            }

            .title {
                margin-left: 30px;
                margin-top: 22px;
                height: 49px;
                font-family: "微软雅黑粗体";
                font-weight: 400;
                font-size: 57px;
                color: #FFFFFF;
            }
        }

        .contentbox {
            display: flex;
            flex-direction: row;
            gap: 20px;

            .content {
                align-items: anchor-center;
                top: 178px;
                gap: 30px;
                width: 1461px;
                height: 489px;
                background-image: url("/imgs/shanghai/矩形 933 拷贝 3.png");
                background-position: left;
                background-size: 100% 100%;
                background-repeat: no-repeat;
                display: flex;
                flex-wrap: wrap;
                align-content: center;
                justify-content: center;
                flex-direction: row;

                .content2-1 {
                    width: 1355px;
                    height: 442px;
                    background-image: url("/imgs/kunming/矩形 933 拷贝 7.png");
                    background-position: left;
                    background-size: 100% 100%;
                    background-repeat: no-repeat;
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    justify-content: center;
                    gap: 20px;

                    .leftcontent {
                        display: flex;

                        .text {
                            width: 244px;
                            font-family: "微软雅黑常规";
                            font-weight: 400;
                            font-size: 24px;
                            color: #FFFFFF;
                            line-height: 29px;
                        }
                    }

                    /* 圆点指示器容器 */
                    .dots-container {
                        display: flex;
                        gap: 10px;
                        /* 圆点间距 */
                        margin-top: 10px;
                    }

                    /* 单个圆点样式 */
                    .dot {
                        width: 12px;
                        height: 12px;
                        border-radius: 50%;
                        /* 圆形 */
                        background-color: #475569;
                        /* 未激活颜色 */
                        cursor: pointer;
                        /* 点击光标 */
                        transition: all 0.3s ease;
                        /* 状态变化动画 */
                    }

                    /* 激活状态的圆点 */
                    .dot.active {
                        background-color: #37D7FF;
                        /* 激活颜色（与主题色匹配） */
                        transform: scale(1.2);
                        /* 激活时稍微放大 */
                    }

                    .middlecontent {
                        width: 574px;
                        height: 379px;
                        background-image: url("/imgs/kunming/图片5.png");
                        background-position: left;
                        background-size: 100% 100%;
                        background-repeat: no-repeat;
                    }

                    .rightcontent {

                        display: flex;
                        flex-direction: column;
                        align-items: center;

                        .imgcontent {
                            width: 447px;
                            height: 299px;
                            background-image: url("/imgs/kunming/矩形 933 拷贝 12.png");
                            background-position: left;
                            background-size: 100% 100%;
                            background-repeat: no-repeat;

                            .img {
                                width: 446px;
                                height: 299px;
                                background-image: url("/imgs/kunming/image64.png");
                                background-position: left;
                                background-size: 100% 100%;
                                background-repeat: no-repeat;
                            }
                        }


                        .text {
                            width: 325px;
                            font-family: "微软雅黑常规";
                            font-weight: 400;
                            font-size: 24px;
                            color: #FFFFFF;
                            line-height: 31px;
                        }
                    }
                }

                .main-title {
                    position: relative;
                    left: 10px;
                    writing-mode: vertical-rl;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    text-align: center;
                    padding: 10px;
                    font-family: "微软雅黑粗体";
                    font-size: 36px;
                    color: #FFFFFF;
                    line-height: 32px;
                    background: linear-gradient(0deg, rgba(46, 131, 183, 0.66) 10%, rgba(255, 255, 255, 1) 70%);
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                }

                /* 左侧按钮区域 */
                .left-buttons {
                    width: 220px;
                    display: flex;
                    flex-direction: column;
                    gap: 10px;

                    .btn-item {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        text-align: center;
                        padding: 10px;
                        cursor: pointer;
                        font-family: "微软雅黑粗体";
                        font-size: 26px;
                        color: #FFFFFF;
                        line-height: 36px;
                        width: 237px;
                        height: 217px;
                        background-image: url("/imgs/kunming/矩形 1269(5).png");
                        background-position: left;
                        background-size: 100% 100%;
                        background-repeat: no-repeat;
                    }

                    .btn-item.active {
                        width: 237px;
                        height: 217px;
                        background-image: url("/imgs/kunming/矩形 1269(4).png");
                        background-position: left;
                        background-size: 100% 100%;
                        background-repeat: no-repeat;
                    }
                }

                /* 左侧按钮区域 */
                .left-buttons2 {
                    width: 220px;
                    display: flex;
                    flex-direction: column;
                    gap: 10px;

                    .btn-item2 {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        text-align: center;
                        padding: 10px;
                        cursor: pointer;
                        font-family: "微软雅黑粗体";
                        font-size: 26px;
                        color: #FFFFFF;
                        line-height: 36px;
                        width: 237px;
                        height: 82px;
                        background-image: url("/imgs/kunming/矩形 1269(3).png");
                        background-position: left;
                        background-size: 100% 100%;
                        background-repeat: no-repeat;
                    }

                    .btn-item2.active {
                        width: 237px;
                        height: 82px;
                        background-image: url("/imgs/kunming/矩形 1269(2).png");
                        background-position: left;
                        background-size: 100% 100%;
                        background-repeat: no-repeat;
                    }
                }

                /* 右侧内容区域 */
                .right-content {
                    flex: 1;
                    display: flex;
                    gap: 30px;
                    padding: 20px;
                    width: 1098px;
                    height: 442px;
                    background-image: url("/imgs/kunming/矩形 933 拷贝 7.png");
                    background-position: left;
                    background-size: 100% 100%;
                    background-repeat: no-repeat;

                    /* 图片区域 */
                    .image-content {
                        width: 358px;
                        display: flex;
                        flex-direction: column;
                        gap: 15px;

                        .main-image {
                            width: 358px;
                            height: 197px;
                            object-fit: cover;
                            border-radius: 4px;
                        }

                        /* 多图网格 */
                        .image-grid {
                            display: flex;
                            flex-direction: column;
                            gap: 10px;

                            .grid-image {
                                width: 358px;
                                height: 197px;
                                object-fit: cover;
                                border-radius: 2px;
                            }
                        }
                    }

                    /* 图片区域 */
                    .image-content2 {
                        width: 490px;
                        display: flex;
                        flex-direction: column;
                        gap: 15px;

                        .main-image2 {
                            width: 490px;
                            height: 374px;
                            object-fit: cover;
                            border-radius: 4px;
                        }
                    }

                    /* 文本内容区 */
                    .text-content {
                        flex: 1;
                        color: white;

                        /* 蓝色方块列表 */
                        .blue-dot-list {
                            margin-bottom: 40px;

                            .dot-item {
                                display: flex;
                                align-items: flex-start;
                                font-family: "微软雅黑常规";
                                font-weight: 400;
                                font-size: 24px;
                                color: #FFFFFF;
                                line-height: 48px;

                                .blue-dot {
                                    color: #49B8FF;
                                    margin-right: 10px;
                                    font-size: 18px;
                                }

                                .dot-text {
                                    flex: 1;
                                }
                            }
                        }

                        /* 白色圆点列表 */
                        .white-dot-list {
                            display: flex;
                            flex-wrap: wrap;
                            flex-direction: row;

                            .dot-item {
                                display: flex;
                                align-items: flex-start;
                                font-family: "微软雅黑常规";
                                font-weight: 400;
                                font-size: 24px;
                                color: #FFFFFF;
                                line-height: 48px;

                                .white-dot {
                                    position: relative;
                                    top: 10px;
                                    width: 20px;
                                    height: 20px;
                                    background-image: url("/imgs/guangzhou/椭圆 767.png");
                                    background-position: left;
                                    background-size: 100% 100%;
                                    background-repeat: no-repeat;
                                }

                                .dot-text {
                                    flex: 1;
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    .box2 {
        margin-left: 272px;
        display: flex;

        .headbox {
            display: flex;
            height: 158px;
            width: 1246px;
            flex-wrap: nowrap;
            flex-direction: row;
            background-image: url("/imgs/ningbo/t(1).png");
            background-position: left;
            background-size: 100% 100%;
            background-repeat: no-repeat;

            .headImg {
                margin-left: 220px;
                margin-top: 41px;
                width: 53px;
                height: 58px;
                background-image: url("/imgs/ningbo/菱形 拷贝.png");
                background-position: left;
                background-size: 100% 100%;
                background-repeat: no-repeat;
            }

            .title {
                margin-left: 30px;
                margin-top: 22px;
                height: 49px;
                font-family: "微软雅黑粗体";
                font-weight: 400;
                font-size: 57px;
                color: #FFFFFF;
            }
        }

        .content {
            display: flex;
            flex-wrap: wrap;
            align-content: center;
            justify-content: center;
            align-items: flex-start;
            position: absolute;
            top: 178px;
            width: 1461px;
            height: 489px;
            background-image: url("/imgs/shanghai/矩形 933 拷贝 3.png");
            background-position: left;
            background-size: 100% 100%;
            background-repeat: no-repeat;

            .img1 {
                width: 1351px;
                height: 434px;
            }

            .contentTitle {
                padding: 0 20px;
                text-align: justify;
                text-justify: inter-ideograph;
                position: relative;
                line-height: 60px;
                top: -98px;
                text-indent: 3.5ch;
                width: 1356px;
                height: 100px;
                font-family: "微软雅黑常规";
                font-weight: 400;
                font-size: 34px;
                color: #FFFFFF;
            }
        }
    }

    .box3 {
        margin-left: 76px;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;

        .headbox {
            display: flex;
            height: 158px;
            width: 1652px;
            flex-wrap: nowrap;
            flex-direction: row;
            background-image: url("/imgs/ningbo/t(1).png");
            background-position: left;
            background-size: 100% 100%;
            background-repeat: no-repeat;

            .headImg {
                margin-left: 220px;
                margin-top: 41px;
                width: 53px;
                height: 58px;
                background-image: url("/imgs/ningbo/菱形 拷贝.png");
                background-position: left;
                background-size: 100% 100%;
                background-repeat: no-repeat;
            }

            .title {
                margin-left: 30px;
                margin-top: 22px;
                height: 49px;
                font-family: "微软雅黑粗体";
                font-weight: 400;
                font-size: 57px;
                color: #FFFFFF;
            }
        }

        .contentbox {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            gap: 20px;

            .content {
                gap: 24px;
                width: 1674px;
                height: 1040px;
                background-image: url("/imgs/kunming/组 7840.png");
                background-position: left;
                background-size: 100% 100%;
                background-repeat: no-repeat;
                display: flex;
                flex-direction: column;
                align-items: center;

                .content1-1 {
                    font-family: "微软雅黑粗体";
                    font-size: 39px;
                    color: #FFFFFF;
                    line-height: 125px;
                }

                .content1-2 {
                    justify-content: space-between;
                    display: flex;
                    flex-wrap: wrap;
                    flex-direction: row;
                    gap: 20px;

                    .leftcontent {
                        display: flex;
                        flex-direction: column;
                        text-align: center;
                        position: relative;
                        left: -44px;
                        top: -0px;
                        gap: 91px;

                        .text {
                            width: 116px;
                            font-family: "微软雅黑粗体";
                            font-size: 28px;
                            color: #FFFFFF;
                            line-height: 43px;
                        }

                        .textcontent {
                            display: flex;
                            flex-direction: column;
                            position: relative;
                            top: 110px;
                            gap: 39px;

                            .text {
                                width: 116px;
                                font-family: "微软雅黑粗体";
                                font-size: 28px;
                                color: #FFFFFF;
                                line-height: 43px;
                            }
                        }
                    }

                    .rightcontent {
                        display: flex;
                        flex-direction: column;
                        flex-wrap: wrap;
                        align-items: center;
                        gap: 58px;
                        text-align: center;

                        .text {
                            width: 700px;
                            font-family: "微软雅黑常规";
                            font-weight: 400;
                            font-size: 28px;
                            color: #FFFFFF;
                            line-height: 33px;
                        }

                        .rightcontentbox1 {
                            display: flex;
                            flex-direction: row;
                            text-align: left;
                            position: relative;
                            top: 40px;
                            left: 40px;
                            gap: 100px;

                            /* 圆点伪元素 */
                            .leftcontent1-1 .lefttext1::before {
                                content: "";
                                /* 空内容，通过样式生成圆点 */
                                position: absolute;
                                left: 0;
                                top: 0px;
                                width: 15px;
                                height: 15px;
                                background-image: url("/imgs/guangzhou/椭圆 767.png");
                                background-position: left;
                                background-size: 100% 100%;
                                background-repeat: no-repeat;
                            }

                            /* 圆点伪元素 */
                            .rightcontent1-1 .righttext1::before {
                                content: "";
                                /* 空内容，通过样式生成圆点 */
                                position: absolute;
                                left: 0;
                                top: 0px;
                                width: 15px;
                                height: 15px;
                                background-image: url("/imgs/guangzhou/椭圆 767.png");
                                background-position: left;
                                background-size: 100% 100%;
                                background-repeat: no-repeat;
                            }

                            .leftcontent1-1 {
                                display: flex;
                                flex-direction: column;

                                .lefttext {
                                    padding-left: 30px;
                                    width: 595px;
                                    font-family: "微软雅黑粗体";
                                    font-size: 18px;
                                    color: #FFFD3D;
                                    line-height: 26px;
                                }

                                .lefttext1 {
                                    position: relative;
                                    /* 为伪元素定位做准备 */
                                    padding-left: 30px;
                                    width: 571px;
                                    font-family: "微软雅黑常规";
                                    font-weight: 400;
                                    font-size: 15px;
                                    color: #FFFFFF;
                                    line-height: 18px;
                                }
                            }

                            .rightcontent1-1 {
                                display: flex;
                                flex-direction: column;

                                .righttext {
                                    padding-left: 30px;
                                    width: 595px;
                                    font-family: "微软雅黑粗体";
                                    font-size: 18px;
                                    color: #FFFD3D;
                                    line-height: 26px;
                                }

                                .righttext1 {
                                    position: relative;
                                    /* 为伪元素定位做准备 */
                                    padding-left: 30px;
                                    width: 571px;
                                    font-family: "微软雅黑常规";
                                    font-weight: 400;
                                    font-size: 15px;
                                    color: #FFFFFF;
                                    line-height: 18px;
                                }
                            }
                        }

                        .title {
                            position: relative;
                            top: 30px;
                            width: 602px;
                            font-family: "微软雅黑粗体";
                            font-size: 33px;
                            color: #FF4A4A;
                            line-height: 43px;
                            text-decoration-line: underline;
                        }

                        .title2 {
                            position: relative;
                            top: 20px;
                            width: 802px;
                            font-family: "微软雅黑常规";
                            font-weight: 400;
                            font-size: 28px;
                            color: #FFFFFF;
                            line-height: 33px;
                        }

                        .textcontent {
                            position: relative;
                            top: 8px;
                            display: flex;
                            flex-direction: row;
                            gap: 40px;

                            .text {
                                width: 300px;
                                font-family: "微软雅黑常规";
                                font-weight: 400;
                                font-size: 28px;
                                color: #FFFFFF;
                                line-height: 33px;
                            }
                        }
                    }
                }

                .content1-3 {
                    display: flex;
                    flex-direction: row;
                    gap: 320px;
                    position: relative;
                    top: 30px;

                    .text {
                        width: 101px;
                        font-family: "微软雅黑粗体";
                        font-size: 32px;
                        color: #6FAFFF;
                        line-height: 33px;
                    }
                }

            }

            .content2 {
                align-items: anchor-center;
                gap: 24px;
                width: 1244px;
                height: 1040px;
                background-image: url("/imgs/kunming/矩形 1052 拷贝 2.png");
                background-position: left;
                background-size: 100% 100%;
                background-repeat: no-repeat;
                display: flex;
                flex-wrap: wrap;
                align-content: center;
                justify-content: center;
                flex-direction: row;

                .content2-1 {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 1186px;
                    font-family: "微软雅黑粗体";
                    font-size: 32px;
                    color: #FFFFFF;
                    line-height: 33px;
                }

                .content2-2 {
                    width: 1194px;
                    height: 209px;
                    background-image: url("/imgs/kunming/椭圆 902.png");
                    background-position: left;
                    background-size: 100% 100%;
                    background-repeat: no-repeat;
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    justify-content: space-around;

                    .leftcontent2-1 {
                        width: 125px;
                        font-family: "微软雅黑粗体";
                        font-size: 25px;
                        color: #FFFFFF;
                    }

                    .leftcontent2-2 {
                        position: relative;
                        left: -8px;
                        width: 15px;
                        font-family: "微软雅黑粗体";
                        font-size: 42px;
                        color: #37D7FF;
                    }

                    /* 圆点伪元素 */
                    .content2-3 .leftcontent2-4 ::before {
                        /* content: ""; */
                        position: absolute;
                        left: 0;
                        top: 10px;
                        width: 15px;
                        height: 15px;
                        background-image: url("/imgs/guangzhou/椭圆 767.png");
                        background-position: left;
                        background-size: 100% 100%;
                        background-repeat: no-repeat;
                    }

                    .content2-3 {
                        display: flex;
                        flex-direction: column;

                        .leftcontent2-3 {
                            position: relative;
                            padding-left: 30px;
                            width: 500px;
                            font-family: "微软雅黑常规";
                            font-weight: 400;
                            font-size: 26px;
                            color: #37D7FF;
                        }

                        .leftcontent2-4 {
                            position: relative;
                            padding-left: 30px;
                            width: 500px;
                            font-family: "微软雅黑常规";
                            font-weight: 400;
                            font-size: 19px;
                            color: #FFFFFF;
                        }
                    }

                    .leftcontent2-5 {
                        width: 304px;
                        height: 209px;
                        background-image: url("/imgs/kunming/图片2.png");
                        background-position: left;
                        background-size: 100% 100%;
                        background-repeat: no-repeat;
                    }
                }
            }
        }
    }
}
</style>